<template>
  <basic-container>
    <el-row :gutter="20">
      <el-form ref="form" :model="form">
        <el-col :span="8">
          <el-form-item label="时间" prop="date">
            <el-date-picker size="mini"
                            v-model="form.date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="媒体" prop="platform">
            <el-select id="id-creativereport-creativetagreport-dictKey" v-model="form.platform" size="mini">
              <el-option v-for="item in platformList" :key="item.dictKey" :label="item.dictValue"
                         :value="item.dictKey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <search-button id="id-creativereport-creativetagreport-resetSearch" :searchConceal.sync="searchConceal" :search="searchForm"
                       :resetSearch="resetSearch"></search-button>
      </el-form>
    </el-row>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               ref="crud"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @sort-change="sortChange"
    >
      <template slot-scope="scope" slot="label">
        <div class="edit_style" @click="edit(scope.row.label)">{{scope.row.label}}</div>
      </template>
    </avue-crud>
    <edit-tags :dialogVisible="dialogVisible" :handle-close="handleDialogClose" :tags-form="tagsForm"></edit-tags>
  </basic-container>
</template>
<script>
import searchButton from "@/components/basic-components/search-button";
import editTags from "./components/edit_tags";
import {transformObjectList, findObject} from "@/util/util";
import {getSysDictList} from "@/api/system/dict";
import Moment from "moment"

export default {
  components: {
    searchButton,
    editTags
  },
  name: "tagsReport",
  data() {
    return {
      searchConceal: false, // 折叠搜索表单
      form: {
        date: [],
        platform: '',
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      query: {},
      option: {
        addBtn: false,
        selection: true,
        menu: false,
        calcHeight: 30,
        tip: false,
        border: true,
        column: [
          {
            label: '标签',
            prop: 'label',
          },
          {
            label: '关联素材数',
            prop: 'creative',
            formatter:function (row) {
              return  Number(row.creative).toLocaleString()
            },
            sortable : true
          },
          {
            label: '消耗',
            prop: 'expend',
            formatter:function (row) {
              return  Number(row.expend).toLocaleString()
            },
            sortable : true
          },
          {
            label: '曝光',
            prop: 'impressions',
            formatter:function (row) {
              return  Number(row.impressions).toLocaleString()
            },
            sortable : true
          },
          {
            label: '点击',
            prop: 'clicks',
            formatter:function (row) {
              return  Number(row.clicks).toLocaleString()
            },
            sortable : true
          },
          {
            label: 'CTR',
            prop: 'ctr',
            formatter:function (row) {
              return  Number(row.ctr).toLocaleString()+ '%'
            },
            sortable : true
          },
          {
            label: '安装',
            prop: 'install',
            formatter:function (row) {
              return  Number(row.install).toLocaleString()
            },
            sortable : true
          },
          {
            label: 'CVR',
            prop: "cvr",
            formatter:function (row) {
              return  Number(row.cvr).toLocaleString() + '%'
            },
            sortable : true
          },
        ]
      },
      data: [],
      loading: false,
      permissionList: [],
      platformList: [],
      dialogVisible:false,
      tagsForm:{},
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getSysDictList('platforms').then(map=>{
        this.platformList = map['platforms'];
      });
      this.form.date = [
        Moment(Moment().add(-30,'day').toDate()).format('YYYY-MM-DD'),
        Moment().format('YYYY-MM-DD')
      ]
      //修改searchForm
      this.query = {
        statrTime: this.form.date[0],
        endTime: this.form.date[1],
        platform: this.form.platform,
      }
    },
    beforeOpen() {
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      this.data = [
        {
          label: '节目',
          cvr: '40',
          ctr: '5.56',
          clicks: '1000',
          install: '400',
          impressions: '18000',
          expend: '180',
          creative: '4'
        }
      ]
      this.loading = false
    },
    /**
     * 搜索
     */
    searchForm() {
      this.query = {
        statrTime: this.form.date[0],
        endTime: this.form.date[1],
        platform: this.form.platform,
      }
      this.onLoad(this.page, this.query);
    },
    /**
     * 重置搜索
     */
    resetSearch() {
      this.$refs.form.resetFields();
    },
    /**
     * 详情
     * @param label
     */
    edit(label){
      this.dialogVisible = true
      this.tagsForm = {
        label:label,
        date:this.form.date,
        platform:this.form.platform
      }

    },
    /**
     * 排序
     */
    sortChange(column){
      console.log(column)
    },
    handleDialogClose(){
      this.dialogVisible = false;
      this.tagsForm = {}
    }

  }
}
</script>

<style scoped lang="scss">
.edit_style{
  color:#4093ff;
  cursor: pointer;
  text-decoration: underline;
}
</style>
